<template>
	<view>
		<uni-easyinput v-model="inputValue" :inputBorder="inputBorder" :placeholder="placeholder"
			:primaryColor="primaryColor" :clearable="clearable" @focus="onFocus" @clear="onClear" />
		<uni-popup ref="popup" type="bottom">
			<popup-list :list="localdata" :otherList="otherList" :keyName="keyName" @click="onClick"></popup-list>
		</uni-popup>
	</view>
</template>

<script>
	/**
	 * DataChecklist 带搜索的数据选择器
	 * @description 通过数据渲染的弹层选择组件
	 * 
	 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
	 * @property {String} value 默认值
	 * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
	 * @property {Array} otherList 额外的列表数据，当搜索结果为空时，可以选择展示该列表的数据 ，格式与localdata一致 [{text:'',value:''}]
	 * @property {Boolean} clearable 是否可以清空已选项
	 * @property {Boolean} disabled 是否禁用
	 * @property {Boolean} inputBorder 是否显示input输入框的边框（默认true）
	 * @property {String} placeholder 输入框的提示文字
	 * @property {String} primaryColor 主题色
	 * @property {String} keyName 选项对象中，需要展示的属性键名（默认 'text' ）
	 * 
	 * @event {Function} focus  获取焦点触发
	 * @event {Function} confirm  点击确定按钮触发
	 * @event {Function} cancel  点击取消按钮触发
	 * @event {Function} clear 点击清除按钮触发
	 * @event {Function} change 内容变化触发
	 */
	export default {
		name: "search-select",
		data() {
			return {
				inputValue: '',
				// 已经选择的数据
				selectedValue: {}
			};
		},
		props: {
			value: {
				type: String | Number | Boolean,
				default: ''
			},
			localdata: {
				type: Array,
				default () {
					return []
				}
			},
			otherList: {
				type: Array,
				default () {
					return []
				}
			},

			clearable: {
				type: Boolean,
				default: true
			},
			inputBorder: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			primaryColor: {
				type: String,
				default: '#007aff'
			},
			keyName: {
				type: String,
				default: 'text'
			}
		},
		watch: {
			value(newValue, oldValue) {
				this.$emit('change', newValue)
			},
			localdata: {
				immediate: true,
				handler(val, old) {
					if (Array.isArray(val) && old !== val) {

					}
				}
			},
			otherList: {
				immediate: true,
				handler(val, old) {
					if (Array.isArray(val) && old !== val) {

					}
				}
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				if (this.value || this.value === 0 || this.value === false) {
					const index = this.localdata.findIndex(i => i.value == this.value)
					console.log(index, '000');
					if (index != -1) {
						this.selectedValue = this.localdata[index]
						this.inputValue = this.selectedValue[this.keyName] ?? ''
					}
				}
			},
			onClick(e) {
				this.inputValue = e.name
				this.$emit('input', e.value)
				this.$refs.popup.close()
			},
			onFocus(e) {
				uni.hideKeyboard();
				this.$refs.popup.open();
				this.$emit('focus')
			},
			onClear() {
				this.$emit('clear')
			},
			uPickerConfirm(e) {
				this.uPicker.selectedValue = e.value[0]
				this.inputValue = this.uPicker.selectedValue[this.keyName]
				this.$emit('input', this.uPicker.selectedValue.value)
				this.uPicker.show = false
			},
			uPickerCancel() {
				this.uPicker.show = false;
				this.$emit('cancel');
			}
		}
	}
</script>

<style>

</style>
